@extends('user.layouts.head')
@section('content')
    <body>
    <div id="app">
        <div class="auth">
            <div class="auth-container">
                <div class="card">
                    <header class="auth-header">
                        <h1 class="auth-title">用户注册 </h1>
                    </header>
                    <div class="auth-content">
                        <div class="form-group">
                            <label>用户名：</label>
                            <input type="text" class="form-control" id="username" maxlength="255" placeholder="请输入您的用户名" required>
                        </div>
                        <div class="form-group">
                            <label>电子邮箱：</label>
                            <input type="email" class="form-control" id="email" maxlength="255" placeholder="请输入您的电子邮箱地址" required>
                        </div>
                        <div class="form-group">
                            <label>密码：</label>
                            <input type="password" class="form-control" id="password" maxlength="16" placeholder="请输入密码" required>
                        </div>
                        <div class="form-group">
                            <label>确认密码：</label>
                            <input type="password" class="form-control" id="password_confirmation" maxlength="16" placeholder="再次输入密码" required>
                        </div>
                        <div class="form-group">
                            <label>验证码：</label>
                            <div class="row">
                                <div class="col-7">
                                    <input type="text" class="form-control" id="captcha" maxlength="5" placeholder="请输入验证码" required>
                                </div>
                                <div class="col-4">
                                    <img src="{{captcha_src()}}" id="captcha_img" onclick="this.src='{{captcha_src()}}'+Math.random()">
                                </div>
                            </div>
                        </div>
                        <div class="form-group">
                            <button type="submit" class="btn btn-block btn-primary" onclick="register()">注册
                            </button>
                        </div>
                        <div class="form-group">
                            <p class="text-muted text-center">已有账户?
                                <a href="{{ route('login') }}">登录!</a>
                            </p>
                        </div>
                    </div>
                </div>

                <div class="text-center">
                    <a href="/" class="btn btn-secondary btn-sm">
                        <i class="fa fa-arrow-left"></i> 返回首页
                    </a>
                </div>

            </div>

        </div>
    </div>
    <script src="{{ mix('js/app.js') }}"></script>
    <script src="{{ asset('/js/main.js') }}"></script>
    <script>

        let isLoading = false;

        if( getQueryVariable('unionid') ){
            toast('未绑定用户名，请完善以下信息！如已有账号请登入后绑定。');
        }

        function getQueryVariable(variable)
        {
            var query = window.location.search.substring(1);
            var vars = query.split("&");
            for (var i=0;i<vars.length;i++) {
                var pair = vars[i].split("=");
                if(pair[0] == variable){return pair[1];}
            }
            return(false);
        }

        function register () {
            if (! $('#username').val()) {
                toast('用户名 不能为空');
                return false
            }
            if (! $('#email').val()) {
                toast('邮箱地址 不能为空');
                return false
            }
            if (! $('#password').val()) {
                toast('密码 不能为空。');
                return false
            }
            if (! $('#password_confirmation').val()) {
                toast('确认密码 不能为空。');
                return false
            }
            if (! $('#captcha').val()) {
                toast('验证码 不能为空。');
                return false
            }

            if (isLoading === false) {
                isLoading = true;
                axios.post('register', {
                    unionid: getQueryVariable('unionid'),
                    username: $('#username').val(),
                    email: $('#email').val(),
                    password: $('#password').val(),
                    password_confirmation: $('#password_confirmation').val(),
                    captcha: $('#captcha').val(),
                })
                    .then(function (response) {
                        isLoading = false;
                        window.location.href = '/user/dashboard';
                    })
                    .catch(function (error) {
                        isLoading = false;
                        $.each(error.response.data.errors, function (index, object) {
                            toast(object[0]);
                            $('#captcha_img').attr('src', '/captcha/default?' + '?' + Math.random());
                            return false;
                        });
                    })
            }
        }
    </script>
    </body>
    </html>
@endsection

